<template>
  <section class="tree">
    <def-tree v-bind="treeOptions" @current-change="onCurrentChange"></def-tree>
  </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ITree } from '@/base-ui/tree/types'

export interface ITreeDataItem {
  id?: number
  label: string
  value?: string
  children?: ITreeDataItem[]
  hasChildren?: boolean
}

const loadTreeData = (id?: number) => {
  id = id ? id++ : (id = 0)
  return Promise.resolve([
    {
      id: id,
      label: 'Level one ' + id,
      value: '111' + id,
      children: [],
      hasChildren: id !== 2
    }
  ])
}

const treeOptions = reactive<ITree<ITreeDataItem>>({
  data: [
    {
      label: 'Level one 1',
      value: '333',
      children: [
        {
          label: 'Level two 1-1',
          children: [
            {
              label: 'Level three 1-1-1'
            }
          ]
        }
      ]
    },
    {
      label: 'Level one 2',
      children: [
        {
          label: 'Level two 2-1',
          children: [
            {
              label: 'Level three 2-1-1'
            }
          ]
        },
        {
          label: 'Level two 2-2',
          children: [
            {
              label: 'Level three 2-2-1'
            }
          ]
        }
      ]
    },
    {
      label: 'Level one 3',
      children: [
        {
          label: 'Level two 3-1',
          children: [
            {
              label: 'Level three 3-1-1'
            }
          ]
        },
        {
          label: 'Level two 3-2',
          children: [
            {
              label: 'Level three 3-2-1'
            }
          ]
        }
      ]
    }
  ],
  nodeKey: 'value',
  props: {
    label: 'label',
    children: 'children',
    isLeaf: (data: ITreeDataItem) => !data.hasChildren
  },
  // 懒加载相关配置
  lazy: true,
  lazyOptions: {
    fn: loadTreeData,
    id: 'id',
    level: 0,
    time: 500
  }
})

const onCurrentChange = (data: ITreeDataItem) => {
  console.log('触发树节点点击', data)
}
</script>

<style scoped lang="scss">
.tree {
}
</style>
